import { defineStore } from "pinia";
import type { ComponentType } from "@/materials/index.d";
import type { EditorStore } from "./index.d";

const useEditorStore = defineStore("editor", {
  state: (): EditorStore => {
    return {
      // 组件列表
      componentList: [],
      // 当前选中组件的id
      currentComponentId: "",
    };
  },
  getters: {
    // 当前选择的组件
    currentComponent(state) {
      return state.componentList.find(
        (comp) => comp.id === state.currentComponentId
      );
    },
  },
  actions: {
    // 添加组件
    addComponent(component: ComponentType) {
      this.componentList.push(component);
    },
    // 设置当前选中组件的id
    setCurrentComponentId(id: string) {
      this.currentComponentId = id;
    },
  },
});

export default useEditorStore;
